<template>
  <el-card class="home__card-item home__activity">
    <div slot="header" class="home__card-title clearfix">
      <h3>库存监控</h3>
      <div>截至: {{ currentDate }}</div>
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__card-content-sum">
        <div class="home__card-content-sum__item">
          <label>{{ summary.totalAmountText }}</label>
          <span>{{ summary.totalAmount }}</span>
        </div>
        <div class="home__card-content-sum__item">
          <label>{{ summary.totalText }}</label>
          <span>{{ summary.total }}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__card-content-wrap">
        <tabs v-model="currentTab" :tabs="tabs" />
        <template v-if="currentTab === 'inventoryType'">
          <div class="home__activity__content">
            <div
              ref="echartInventoryTypeAmount"
              class="home__activity__echart"></div>
            <div
              ref="echartInventoryTypeCount"
              class="home__activity__echart"></div>
          </div>
        </template>
        <template v-if="currentTab === 'warehouse'">
          <div class="home__activity__content">
            <div
              ref="echartInventoryWareHouseAmount"
              class="home__activity__echart"></div>
            <div
              ref="echartInventoryWareHouseCount"
              class="home__activity__echart"></div>
          </div>
        </template>
        <template v-if="currentTab === 'product'">
          <div class="home__activity__content">
            <el-table :data="tableData" border size="mini" height="300px">
              <el-table-column
                show-overflow-tooltip
                prop="productName"
                label="产品名称" />
              <el-table-column
                show-overflow-tooltip
                prop="total"
                label="库存数量" />
              <el-table-column
                show-overflow-tooltip
                prop="totalAmount"
                label="库存金额" />
            </el-table>
            <el-table :data="tableData2" border size="mini" height="300px">
              <el-table-column
                show-overflow-tooltip
                prop="productName"
                label="产品名称" />
              <el-table-column
                show-overflow-tooltip
                prop="total"
                label="库存数量" />
              <el-table-column
                show-overflow-tooltip
                prop="totalAmount"
                label="库存金额" />
            </el-table>
          </div>
          <el-pagination
            :current-page="currentPage"
            background
            layout="prev, pager, next"
            :total="total"
            @currentChange="currentChange" />
        </template>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import Tabs from './tabs.vue'
import moment from 'moment'
import { inventoryReport } from '@/api/report/report'
export default {
  data() {
    return {
      summary: {},
      currentDate: moment().format('YYYY-MM-DD'),
      currentTab: 'inventoryType',
      tabs: [
        { name: '类型', value: 'inventoryType' },
        { name: '仓库', value: 'warehouse' },
        { name: '产品', value: 'product' }
      ],
      currentYear: 'this',
      currentPage: 1,
      total: 1000,
      inventoryTypeAmountList: [],
      inventoryTypeCountList: [],
      tableData: [],
      tableData2: [],
      instances: {},
      echartData: [],
      inventoryWareHouseAmountList: [],
      inventoryWareHouseCountList: []
    }
  },

  components: {
    Tabs
  },
  watch: {
    currentTab() {
      this.inventoryReport(this.currentTab)
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize)
    })
  },
  created() {
    this.inventoryReport('summary')
    this.inventoryReport('inventoryType')
  },
  methods: {
    inventoryReport(type) {
      var queryParams = {
        createTime: ''
      }
      inventoryReport(type, queryParams).then((response) => {
        console.log(response)
        if (type === 'summary') {
          this.summary = response.data.summary
        } else if (type === 'inventoryType') {
          this.inventoryTypeAmountList = response.data.inventoryTypeList.map(
            (item) => {
              item.value = item.totalAmountProportion
              return item
            }
          )
          this.inventoryTypeCountList = response.data.inventoryTypeList.map(
            (item) => {
              item.value = item.totalProportion
              return item
            }
          )
          this.setInventoryTypeOptions()
        } else if (type === 'warehouse') {
          this.inventoryWareHouseAmountList =
            response.data.inventoryWareHouseList.map((item) => {
              item.value = item.totalAmountProportion
              return item
            })
          this.inventoryWareHouseCountList =
            response.data.inventoryWareHouseList.map((item) => {
              item.value = item.totalProportion
              return item
            })
          this.setInventoryWareHouseOptions()
        } else if (type === 'product') {
          var result =this.splitArray(response.data.productData.list,5)
          this.tableData = result[0]
          this.tableData2 = result.length>1?result[1]:[]
          this.total = response.data.productData.total
        }
      })
    },
    currentChange() {},
    setInventoryTypeOptions() {
      this.$nextTick(() => {
        // 金额
        if (this.instances.inventoryTypeAmount) {
          this.instances.inventoryTypeAmount.dispose()
          this.instances.inventoryTypeAmount = null
        }
        this.instances.inventoryTypeAmount = echarts.init(
          this.$refs.echartInventoryTypeAmount,
          null,
          { renderer: 'svg' }
        )
        this.instances.inventoryTypeAmount.setOption({
          title: {
            text: '金额',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          grid: {
            show: true, // 显示直角坐标系网格
            borderColor: 'rgba(204, 204, 204, 1)' // 网格边框颜色
          },
          series: [
            {
              name: '比例',
              type: 'pie',
              radius: ['30%', '60%'],
              padAngle: 2,
              data: this.inventoryTypeAmountList.map((e) => {
                return {
                  name: e.name,
                  value: e.totalAmount
                }
              })
            }
          ]
        })
      })
      // 数量
      if (this.instances.inventoryTypeCount) {
        this.instances.inventoryTypeCount.dispose()
        this.instances.inventoryTypeCount = null
      }
      this.instances.inventoryTypeCount = echarts.init(
        this.$refs.echartInventoryTypeCount,
        null,
        { renderer: 'svg' }
      )
      this.instances.inventoryTypeCount.setOption({
        title: {
          text: '数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        grid: {
          show: true, // 显示直角坐标系网格
          borderColor: 'rgba(204, 204, 204, 1)' // 网格边框颜色
        },
        series: [
          {
            name: '比例',
            type: 'pie',
            radius: ['30%', '60%'],
            padAngle: 2,
            data: this.inventoryTypeCountList.map((e) => {
              return {
                name: e.name,
                value: e.total
              }
            })
          }
        ]
      })
    },
    setInventoryWareHouseOptions() {
      this.$nextTick(() => {
        // 金额
        if (this.instances.inventoryWareHouseAmount) {
          this.instances.inventoryWareHouseAmount.dispose()
          this.instances.inventoryWareHouseAmount = null
        }
        this.instances.inventoryWareHouseAmount = echarts.init(
          this.$refs.echartInventoryWareHouseAmount,
          null,
          { renderer: 'svg' }
        )
        this.instances.inventoryWareHouseAmount.setOption({
          title: {
            text: '金额',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          grid: {
            show: true, // 显示直角坐标系网格
            borderColor: 'rgba(204, 204, 204, 1)' // 网格边框颜色
          },
          series: [
            {
              name: '比例',
              type: 'pie',
              radius: ['30%', '60%'],
              padAngle: 2,
              data: this.inventoryWareHouseAmountList.map((e) => {
                return {
                  name: e.name,
                  value: e.totalAmount
                }
              })
            }
          ]
        })
      })
      // 数量
      if (this.instances.inventoryWareHouseCount) {
        this.instances.inventoryWareHouseCount.dispose()
        this.instances.inventoryWareHouseCount = null
      }
      this.instances.inventoryWareHouseCount = echarts.init(
        this.$refs.echartInventoryWareHouseCount,
        null,
        { renderer: 'svg' }
      )
      this.instances.inventoryWareHouseCount.setOption({
        title: {
          text: '数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        grid: {
          show: true, // 显示直角坐标系网格
          borderColor: 'rgba(204, 204, 204, 1)' // 网格边框颜色
        },
        series: [
          {
            name: '比例',
            type: 'pie',
            radius: ['30%', '60%'],
            padAngle: 2,
            data: this.inventoryWareHouseCountList.map((e) => {
              return {
                name: e.name,
                value: e.total
              }
            })
          }
        ]
      })
    }
  },

  handleResize() {
    Object.keys(this.instances).forEach((key) => {
      this.instances[key]?.resize?.()
    })
  }
}
</script>

<style lang="scss" scoped>
.home__activity {
  .home__activity__content {
    margin: 20px 0;
    display: flex;
    .home__activity__echart {
      width: 600px;
      height: 400px;
    }
    ::v-deep .el-table:first-child {
      flex: 1;
      margin-right: 30px;
    }
    :v-deep .el-table {
      width: 100%;
    }
  }
}
</style>
